<template>
  <div class="app-container">
    <Table
      :columns="columns"
      :page-function="page"
      :save-all-function="saveAll"
      ref="table"
    >
    </Table>
    <el-dialog :visible="assignDialog" @close="closeAssignDialog">
      <el-row>
<!--        <el-col :span="12">-->
<!--          <el-tree-->
<!--            ref="menuTree"-->
<!--            :data="menus"-->
<!--            show-checkbox-->
<!--            default-expand-all-->
<!--            node-key="id"-->
<!--            highlight-current-->
<!--            :props="menuProps">-->
<!--          </el-tree>-->
<!--        </el-col>-->
        <el-col :span="12">
          <el-tree
            ref="permissionTree"
            :data="permissions"
            show-checkbox
            default-expand-all
            node-key="id"
            highlight-current
            :props="permissionProps">
          </el-tree>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAssignDialog">取 消</el-button>
        <el-button type="primary" @click="saveAssign">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, saveAll, page } from '@/api/role'
import { list as listMenu } from '@/api/menu'
import { list as listPermission } from '@/api/permission'
import Table from '@/components/Table/index'
import { commonDel, commonList, commonPage, commonSaveAll } from '@/utils/common'

export default {
  name: 'Role',
  components: { Table },
  data() {
    return {
      saveAll: saveAll,
      page: page,
      row:{},
      assignDialog: false,
      menus: [],
      permissions:[],
      menuProps: {
        children: 'children',
        label: 'name'
      },
      permissionProps: {
        children: 'children',
        label: 'name'
      },
      columns: [
        {
          prop: 'id',
          label: '序号',
          width: '80',
          form: {
            key: 'id',
            label: 'id',
          },
        },
        {
          prop: 'name',
          label: '名称',
          width: '180',
          form: {
            key: 'name',
            label: '名称',
            type: 'input',

          }
        },
        {
          form: {
            key: 'menus',
          }
        },
        {
          form: {
            key: 'permissions',
          }
        },
        {
          prop: 'createTime',
          label: '创建时间',
          width: '200px'
        },
        {
          prop: 'updateTime',
          label: '更新时间',
          width: '200px'
        },
        {
          label: '操作',
          type: 'action',
          buttons: [
            {
              name: '分配',
              size: 'small',
              click: (row) => {
                this.showAssignDialog(row)
              }
            }
          ]
        }
      ]
    }
  },
  watch: {
    row(v) {
      this.$nextTick(() =>{
        this.$refs.menuTree.setCheckedNodes(v.menus)
        this.$refs.permissionTree.setCheckedNodes(v.permissions)
      })
    }
  },
  beforeMount() {
    this.listMenu()
    this.listPermission()
  },
  methods: {
    showAssignDialog(row) {
      this.assignDialog = true
      this.row = row
    },
    closeAssignDialog() {
      this.assignDialog = false
    },
    saveAssign() {
      this.row.menus = this.$refs.menuTree.getCheckedNodes()
      this.row.permissions = this.$refs.permissionTree.getCheckedNodes()
      this.$refs.table.save(this.row)
      this.closeAssignDialog()
    },
    listMenu() {
      // commonList(this.menus,listMenu)
    },
    listPermission() {
      commonList(this.permissions,listPermission)
    }
  }
}
</script>

<style scoped>

</style>
